<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>
		<title>Gimme Class Manipulation Tests</title>

		<script type = "text/javascript" src = "../jsunit/app/jsUnitCore.js"></script>
		<script type = "text/javascript" src = "../utils/jsunit/jsUnitHelperFunctions.js"></script>
		<script type = "text/javascript" src = "../build/debug/gimme.js"></script>
		
		<script type = "text/javascript">			
			// .setUp is executed before each test
			var elem;
			function setUp()
			{
				elem = document.createElement('div'); 
			}
			
			// add/remove class tests on a gimme object
			function test_addClassToEmpty()
			{
				elem.className = '';
				addClassAndVerify(g(elem), 'foo', 'foo');
			}
			
			function test_addClassToSingle()
			{
				elem.className = 'foo';
				addClassAndVerify(g(elem), 'bar', 'foo bar');
			}
			
			function test_addClassWithSimilarName()
			{
				elem.className = 'foo';
				addClassAndVerify(g(elem), 'foo-bar', 'foo foo-bar');
			}
			
			function test_addDuplicateClass()
			{
				elem.className = 'foo bar';
				addClassAndVerify(g(elem), 'foo', 'foo bar');
			}
			
			function test_addMultipleClassesToEmpty()
			{
				elem.className = '';
				addClassAndVerify(g(elem), 'foo bar blah', 'foo bar blah');
			}
			
			function test_addMultipleClassesToSingle()
			{
				elem.className = 'foo';
				addClassAndVerify(g(elem), 'bar blah', 'foo bar blah');
			}
			
			function test_addMultipleDuplicateClassesWithOrderSwitch()
			{
				elem.className = 'foo bar blah';
				addClassAndVerify(g(elem), 'bar blah foo', 'foo bar blah');
			}
			
			function test_addMultipleDuplicateClassesAndMultipleUniqueClasses()
			{
				elem.className = 'foo bar blah';
				addClassAndVerify(g(elem), 'dog bar cat', 'foo bar blah dog cat');
			}
			
			function test_removeClassFromStart()
			{
				elem.className = 'foo bar blah';
				removeClassAndVerify(g(elem), 'foo', 'bar blah');
			}
			
			function test_removeClassFromEnd()
			{
				elem.className = 'foo bar blah';
				removeClassAndVerify(g(elem), 'blah', 'foo bar');
			}
			
			function test_removeClassFromMiddle()
			{
				elem.className = 'foo bar blah';
				removeClassAndVerify(g(elem), 'bar', 'foo blah');
			}
			
			function test_removeMultipleClasses()
			{
				elem.className = 'foo bar blah';
				removeClassAndVerify(g(elem), 'foo blah', 'bar');
			}
			
			function test_hasSingleClass()
			{
				elem.className = 'foo';
				assertTrue('hasClass("foo") is not true', g(elem).hasClass('foo'));
			};
			
			function test_singleClassAmongMany()
			{
				elem.className = 'foo bar baz';
				assertTrue('hasClass("bar") is not true', g(elem).hasClass('bar'));
			};
		</script>
	</head>

	<body>
		<h1>Gimme Class Manipulation Tests</h1>

		<div id = "zoo" class = "place man-made">
			<span id = "panda1" class = "panda">Panda1</span>
			<span id = "tiger1" class = "tiger">Tiger1</span>
			<span id = "panda2" class = "panda">Panda2</span>
			<span id = "panda3" class = "panda" foo = "bar">Panda3</span>
		</div>
		<div id = "forest" class = "place natural">
			<p id = "tree1" class = "tree pine">Pine tree 1</p>
			<p id = "tree2" class = "tree oak">Oak tree 1</p>
			<span id = "chipmunk1" class = "mammal chipmunk">Chipmunk 1</span>
			<span id = "gazelle1" class = "mammal gazelle">Gazelle 1</span>
			<p id = "ivyPlant1" class = "ivy poison">Poison Ivy Plant 1</p>
		</div>
	</body>

</html>